<template>
	<view>
		<view class="flex align-center justify-between px-4 border-bottom">
			<view class="tab-tiem" :class="tabIndex==0?'tab-tiemd':''" @click="checkTab(0)">领劵中心</view>
			<view class="tab-tiem" :class="tabIndex==1?'tab-tiemd':''" @click="checkTab(1)">可使用</view>
			<view class="tab-tiem" :class="tabIndex==3?'tab-tiemd':''" @click="checkTab(3)">已使用</view>
			<view class="tab-tiem" :class="tabIndex==4?'tab-tiemd':''" @click="checkTab(4)">已失效</view>
		</view>
		<view class="list mt-2 mx-2">
			<view class="" v-for="(item,index) in couponList" :key="index">
				<block v-if="tabIndex==3&&item.status_code=='used'">
					<shopro-coupon priceColor="#C00258;" color="#C00258;" btnTextColor="#ffffff;" :state="3" :couponData="item"  gradientColor="background: linear-gradient(to right, #e595ba,#fad5e9)"></shopro-coupon>
				</block>
				<block v-if="tabIndex==4&&item.status_code=='expired'">
					<shopro-coupon priceColor="#C00258;" color="#C00258;" btnTextColor="#ffffff;" :state="3" :couponData="item"  gradientColor="background: linear-gradient(to right, #e595ba,#fad5e9)"></shopro-coupon>
				</block>
				<block v-if="item.status_code=='can_get'||item.status_code=='can_use'">
					<shopro-coupon priceColor="#C00258;" color="#C00258;" btnTextColor="#ffffff;" :state="tabIndex" :couponData="item"  gradientColor="background: linear-gradient(to right, #e595ba,#fad5e9)"></shopro-coupon>
				</block>
			</view>
			<!-- <view class="">
				<shopro-coupon :state="3"></shopro-coupon>
			</view> -->
			
		</view>
		<!-- 缺省页 -->
		<shopro-empty marginTop="300rpx" v-if="isEmpty" :image="'/static/images/empty_groupon.png'" tipText="暂无此类优惠券"></shopro-empty>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabIndex:0,
				couponList:[],
				isEmpty: false,
			}
		},
		onShow() {
			this.getCouponList();
		},
		methods:{
			checkTab(e){
				this.tabIndex=e
				this.couponList=[]
				this.getCouponList()
			},
			getCouponList() {
				let that = this;
				that.$http('coupons.list', {
					type: that.tabIndex
				}).then(res => {
					if (res.code == 1) {
						that.couponList = res.data;
						that.isEmpty = !that.couponList.length;
					}
				});
			},
			
		}
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
	.tab-tiem{
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		padding:28rpx 0rpx;
	}
	.tab-tiemd{
		color: #D30855;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #D30855;
	}
</style>